<template>
  <svg :class="Class"  aria-hidden="true">
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script>
import { reactive, ref, isRef, toRefs, onMounted, computed } from '@vue/composition-api';
export default {
  name: "SvgIcon",
  props: [
    'iconClass', 'className'
  ],
  setup (props, { }) {
    // console.log(props);

    // 计算属性
    const icon = computed(() => `#icon-${props.iconClass}`);
    const Class = computed(() => {
      if(props.className){
        return `svg-icon ${props.className}`;
      }else{
        return `svg-icon`;
      }
    });

    return {
      icon,
      Class
    }
  }
}
</script>

<style lang="scss" scoped>
svg{
  padding:0;
  margin:0;
}
</style>

